<template>
  <view class="main">
    <view class="commonBox">
      <template v-if="teamList?.length > 0">
        <view class="detail_box">
          <view v-for="(item, index) in teamList" :key="index" class="item">
            <view class="top">
              <view>{{ maskBankCard(item.bankNo) }}</view>
              <view class="status"> {{ item.status == "1" ? "打款中" : item.status == "2" ? "打款完成" : item.status == "3" ? "已驳回" : "" }}</view>
            </view>
            <view class="top">
              <view class="time">{{ dayjs(item.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}</view>
              <view class="num">+{{ item.amount }}</view>
            </view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
      <u-loadmore height="30" :status="status" />
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
import { maskBankCard } from "@/utils/commonFn";
//@ts-ignore
import { onShow, onReachBottom } from "@dcloudio/uni-app";
const { id } = defineProps<{
  id: string;
}>();
const page = ref(1);
onShow(async () => {
  reset();
});
const status = ref("loadmore");
const teamList = ref<myTypes.profitRecord[]>([]);
const getList = async () => {
  status.value = "loadmore";
  const res: any = await shopSelleApplyList({ shopId: id, pageNo: page.value });
  teamList.value = teamList.value.concat(res.settleInfoList);
  if (!res.next) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
const reset = () => {
  page.value = 1;
  status.value = "loadmore";
  teamList.value = [];
  getList();
};
</script>

<style lang="less" scoped>
/deep/ .u-cell__body {
  padding: 0rpx !important;
  padding-bottom: 32rpx !important;
}
.detail_box {
  background: #fff;
  border-radius: 16rpx;

  /deep/ .u-cell__label {
    font-size: 26rpx;
    font-family: DINPro-Regular, DINPro;
    color: #bebebe;
  }
  /deep/ .u-cell__value {
    font-size: 30rpx;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #333333;
  }
}

.t {
  display: flex;
  margin-top: 50rpx;
  justify-content: space-between;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 34rpx;
  padding-right: 50rpx;
}
.item {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f8f8f8;
}
.top {
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
  color: #333333;
  .time {
    font-size: 24rpx;
    color: #a5a5a5;
    margin-top: 15rpx;
  }
  .status {
    font-size: 24rpx;
    color: #333333;
  }
  .num {
    font-size: 40rpx;
    color: #e21e1a;
  }
}
</style>
